<template>
    <div>
        <div id="box">
            <span id="back" @touchstart="dtnClick" class="fa fa-angle-left">
                </span>
                    <span id="user">用户注册</span>
                    <span id="login" @touchstart="ctnClick">登录</span>
        </div>
        <div id="outer">
            <input type="text" v-model="param.username" placeholder="手机号/邮箱/用户名">
            <br>
            <input type="password" v-model="param.psw" placeholder="密码">
            <br>
            <input type="password" v-model="param.confirm" placeholder="再次输入密码">
            <br>
            <div id="captcha">
                <input type="text" name="captcha" placeholder="请输入下方四位验证码" v-model="param.captcha">
                <img src="/api/users/captcha" id="cap" @touchstart="refreshCaptcha" ref="cap">
            </div>
            <button @touchstart="regist">注册</button>
        </div>
        <div id="footer">
            <input type="checkbox" id="check">
            <span>我已阅读并同意</span>
            <span id="plan">《波奇网络服务协议》</span>

        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data: function() {
        return {
            param: {
                username: "",
                psw: "",
                captcha:"",
                confirm:""
            }
        }
    },
    methods: {
        dtnClick: function() {
            history.back()
        },
        ctnClick: function() {
            location.hash = "/user/login"
        },
        refreshCaptcha: function() {
           this.$refs.cap.src= "";

            this.$refs.cap.src= '/api/users/captcha?' + Math.random()
        },
        regist: function() {
            this.http.post("/api/users/regist", this.param)
                .then(res => {
                    
                     if (res.data.err == "1") {
                        Toast({
                            message: '用户名已被占用',
                            position: 'middle',
                            duration: 1000
                        });
                       
                    } else if (res.data.err == "3") {
                        Toast({
                            message: '账号格式错误',
                            position: 'middle',
                            duration: 1000
                        });
                        
                    }
                    else if (res.data.err == "4") {
                        Toast({
                            message: '密码格式错误',
                            position: 'middle',
                            duration: 1000
                        });
                        
                    }
                    else if (res.data.err == "5") {
                        Toast({
                            message: '两次输入密码不一致',
                            position: 'middle',
                            duration: 1000
                        });
                        
                    }
                     else if (res.data.err == "2") {
                        Toast({
                            message: '验证码错误',
                            position: 'middle',
                            duration: 1000
                        });
                     }
                     
                    else if (res.data.err == "0") {
                        Toast({
                            message: '注册成功',
                            position: 'middle',
                            duration: 1000
                        });
                        location.hash = "/user/login"
                    } 

                })
        }
    }
}
</script>

<style scoped>
#box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 7vh;
    font-size: 18px;
    border-bottom: solid 1px gainsboro;
    color: rgb(56, 56, 56)
}

#user {
    font-size: 18px;
    font-weight: 550;
}

#login {
    cursor: pointer;
    font-size: 14px;
    font-weight: 550;
    cursor: pointer;
}

#back {
    font-size: 28px;
    /* font-weight: 500; */
    margin-left: 3vw;
    cursor: pointer;
}

#outer input {
    width: 90%;
    height: 7vh;
    margin-left: 5vw;
    border: solid 1px gainsboro;
}

#outer {
    margin-top: 10vh;
}

button {
    cursor: pointer;
    width: 90%;
    height: 7vh;
    margin-left: 5vw;
    margin-top: 3vh;
    background-color: #FF9E93;
    border: solid 1px #FF9E93;
    border-radius: 8px;
    color: white;
    font-size: 20px;
}

#footer {
    margin-top: 2vh;
    width: 100%;
    height: 5vh;
    color: gray;
    font-size: 12px;
}

#check {
    margin-left: 5vw;
}

#plan {
    color: red;
}

#captcha {
    position: relative;
}

#cap {
    position: absolute;
    right: 6vw;
    top: 1vh;
}
</style>